<!doctype html>
<!--[if lt IE 8 ]><html lang="en" class="no-js ie ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie"><![endif]-->
<!--[if (gt IE 8)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<%@taglib uri="/struts-tags" prefix="s"%>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Team List</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Combined stylesheets load -->
<!-- Load either 960.gs.fluid or 960.gs to toggle between fixed and fluid layout -->
<link href="css/main.css" rel="stylesheet" type="text/css">

<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon-large.png">
<script src="js/index.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jstab.js"></script>
</head>
<body>

	<!-- Header -->

	<!-- Server status -->
	<header></header>
	<!-- End server status -->

	<!-- Main nav -->
	<%@include file='header.jsp'%>
	<!-- End status bar -->

	<div id="header-shadow"></div>
	<!-- End header -->

	<!-- Always visible control bar -->
	<div id="control-bar" class="grey-bg clearfix">
		<div class="container_12"></div>
	</div>
	<!-- End control bar -->

	<!-- Content -->

	<article class="container_12">

		<section class="grid_8">

			<div class="block-border">
				<form class="block-content form" id="table_form" method="get"
					action="listTeam" >
					<ul class='tabs'>
						<li><a href='#tab2'>Details</a>
						</li>
						<li><a href='#tab1'>Teams</a>
						</li>
						</ul>
						<div class="float-right" style="margin: -2.5em 2em 0 0;">
							
								<a class="button" id="activeDepartment" title="In-active"
									href="#" onclick="changeIsActive()"><span class="smaller"><img
										src="images/icons/fugue/flag.png" height="16" width="16"><strong
										class="tmpAc">In-active</strong> </span> </a>
							
							
								
							
							<a class="button" title="Save" href="#" style="cursor: pointer;"
								onclick="validateDepartment();" id="saveBtn"> <span
								class="smaller"><img height="16" width="16"
									src="images/icons/fugue/tick-circle.png"><strong>
										Save </strong> </span> </a> <a class="button" title="Back"
								style="cursor: pointer;" onclick="javascript:history.back();"> <span
								class="smaller"><img height="16" width="16"
									src="images/icons/fugue/navigation-180.png"><strong>
										Back </strong> </span> </a>

						</div>



						<!-- submit form -->






						<!-- end submit form -->
					

					<h1>Department Detail</h1>
					
					<div id='tab1' class="tabs-content" >
					
						<div class="float-right">
							<a class="button red" title="Add" href="AddTeam.jsp">
								<span class="smaller">CREATE</span> </a> <input type="checkbox" name="checkInclude" value="true"
                                           ${ checkInclude ? "checked" : "" }
                                           onclick="document.getElementById('table_form').submit();" />
                                    <label for="table-display" style="display: inline">Include
                                        In-active</label>

						</div>

						<ul class="controls-buttons" style="cursor: pointer">
							<s:hidden type="hidden" id="filter" name="filter" />
							<s:hidden type="hidden" id="checkActive" name="checkActive" />
							<li><a
								onclick="document.getElementById('filter').value = 'all'; document.getElementById('table_form').submit();">
									<strong>ALL</strong> </a></li>
							<li class="sep"></li>
							<li><a
								onclick="document.getElementById('filter').value = '0-9'; document.getElementById('table_form').submit();">
									<strong>0-9</strong> </a></li>
							<li><a
								onclick="document.getElementById('filter').value = 'ABCDE'; document.getElementById('table_form').submit();">
									<strong>A B C D E</strong> </a></li>
							<li><a
								onclick="document.getElementById('filter').value = 'FGHIJ'; document.getElementById('table_form').submit();">
									<strong>F G H I J</strong> </a></li>

							<li><a
								onclick="document.getElementById('filter').value = 'KLMN'; document.getElementById('table_form').submit();">
									<strong>K L M N </strong> </a></li>

							<li><a
								onclick="document.getElementById('filter').value = 'OPQR'; document.getElementById('table_form').submit();">
									<strong>O P Q R </strong> </a></li>

							<li><a
								onclick="document.getElementById('filter').value = 'STUV'; document.getElementById('table_form').submit();">
									<strong>S T U V </strong> </a></li>

							<li><a
								onclick="document.getElementById('filter').value = 'WXYZ'; document.getElementById('table_form').submit();">
									<strong>W X Y Z </strong> </a></li>

						</ul>




						</table>
						<table class="table" id="tablepaging" cellspacing="0" width="100%">

							<thead>
								<tr>
									<th scope="col">Team Name</th>
									<th scope="col">Address Line 1</th>
									<th scope="col">Postcode</th>
									<th scope="col">Contact</th>
									<th scope="col">Is-Active?</th>


								</tr>
							</thead>
							<s:iterator value="teamList" var="item">
									<tr>

										<td><a href="javascript:editr(${item.teamID })">${item.teamName }</a>
										</td>
										<td>${item.addr1 }</td>
										<td>${item.postcode }</td>
										<td>${item.contactName }</td>
										<td>${item.isActive ==1?"Yes":"No"}</td>
										
									</tr>
								</s:iterator>

						</table>




						<div class="block-footer" id="pageNavPosition">
							<script type="text/javascript">
						var pager = new Pager('tablepaging', 5);
						pager.init();
						pager.showPageNav('pager', 'pageNavPosition');
						pager.showPage(1);
					</script>
						</div>
					</div>

					<div id='tab2' class="tabs-content">
					<ul class="message warning no-margin">
						<li id="message">This is a <strong>warning message</strong>,
							inside a box</li>
						<li class="close-bt"></li>
					</ul>

						<!-- Tab details 1 -->
						<div id="tab-details1" style="overflow: hidden;">
							<div style="float: left; width: 48%; overflow: hidden">
								<p class="colx2-left">

									<s:hidden name="departmentID" id="departmentID" />
									<s:hidden name="active" id="active" />
								</p>
								<p class="colx2-left"
									style="width: 100%; margin-bottom: 10px; float: left;">
									<label for="complex-en-url"
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%">Department
										Name <font color="red">*</font>
									</label>
									<s:textfield name="departmentName" cssClass="full-width"
										style="width: 55%;"></s:textfield>
								</p>

								<p class="colx2-left"
									style="width: 100%; margin-bottom: 10px; float: left;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Department
										Short Description <font color="red">*</font>
									</label>
									<s:textarea name="shortDescription" style="width: 52%"></s:textarea>
								</p>

								<p class="colx2-left"
									style="width: 100%; margin-bottom: 10px; float: left;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Lead
										Contact</label>
									<s:textfield name="firstname" required="true"
										style="width: 40%;" id="lu.contactName" disabled="true" />
									<a href="" style="width: 20%"
										onclick="return popitup('search.action?contact.firstName=&contact.surName=')">Lookup</a>
								</p>
								<p class="colx2-left"
									style="width: 100%; margin-bottom: 10px; float: left;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Copy
										address from</label> <input type="radio" name="sex"
										value="organisation">Organisation <input type="radio"
										name="sex" value="parent" style="margin-left: 20px">Parent
								</p>
								<p class="colx2-left"
									style="width: 100%; margin-bottom: 10px; float: left;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
										Line 1</label>
									<s:textfield name="department.addressLine1" required="true"
										style="width: 52%;" id="lu.address_line1" />
								</p>

								<p class="colx2-left"
									style="width: 100%; margin-bottom: 10px; float: left;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
										Line 2</label>
									<s:textfield name="department.addressLine2" required="true"
										style="width: 52%;" id="addressLine2" />
								</p>
								<p class="colx2-left"
									style="width: 100%; margin-bottom: 10px; float: left;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Address
										Line 3</label>
									<s:textfield name="department.addressLine3" required="true"
										style="width: 52%;" id="addressLine3" />
								</p>

								<p class="colx2-left"
									style="width: 100%; margin-bottom: 10px; float: left;">
									<label for="complex-en-url"
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Postcode</label>
									<s:textfield name="postCode" required="true"
										style="width: 40%;" id="lu.postCode" disabled="true" />
									<a href=""
										onclick="return popitup('add_lookup.action?address.postCode=&address.addressName=&address.townName=')">Lookup</a>
								</p>

								<p class="colx2-left"
									style="width: 100%; margin-bottom: 10px; float: left;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Town/Village/City</label>
									<s:textfield name="townName" required="true"
										style="width: 52%;" id="lu.townName" disabled="true" />
								</p>

								<p class="colx2-left"
									style="width: 100%; margin-bottom: 10px; float: left;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">County</label>
									<s:textfield name="countyName" required="true"
										style="width: 52%;" id="lu.countyName" disabled="true" />
								</p>
								<p class="colx2-left"
									style="width: 100%; margin-bottom: 10px; float: left;">
									<label for="complex-en-url"
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Nation/Country</label>
									<select id="lu.countryName" name="lu.countryName"
										class="full-width" style="width: 210px;">
										<option value=""></option>
									</select>
								</p>
							</div>


							<!-- right -->


							<div style="float: right; width: 48%">

								<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">Type
										of Bussiness </label>
									<s:textfield name="businessName" required="true"
										style="width: 38%;" id="lu.businessName" disabled="true" />
									<a href=""
										onclick="return popitup('bus_lookup.action?business.businessName=&business.sicCode=')">Lookup</a>
								</p>


								<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
										SIC Code</label>
									<s:textfield name="sicCode" required="true" style="width: 50%;"
										id="lu.sicCode" disabled="true" />

								</p>

								<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
										Department Full Description</label>
									<s:textarea name="directorate.fullDescription"
										style="width: 50%;"></s:textarea>
								</p>

								<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
										Phone Number</label>
									<s:textfield name="directorate.phoneNumber"
										cssClass="full-width" style="width: 52%;"></s:textfield>
								</p>
								<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
										Fax</label>
									<s:textfield name="directorate.fax" cssClass="full-width"
										style="width: 52%;"></s:textfield>
								</p>
								<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
										Email</label>
									<s:textfield name="directorate.email" cssClass="full-width"
										style="width: 52%;"></s:textfield>
								</p>
								<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
									<label
										style="line-height: 30px; float: left; margin-right: 20px; width: 38%;">
										Web Address</label>
									<s:textfield name="directorate.webAddress"
										cssClass="full-width" style="width: 52%;"></s:textfield>
								</p>
								<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">

								</p>
								<p class="colx2-right" style="width: 100%; margin-bottom: 10px;">
								</p>
								<p class="colx2-right">
									<s:hidden name="contactID" id="contactID" />
									<s:hidden name="addressID" id="target5" />
									<s:hidden name="businessID" id="businessID" />
									<s:hidden name="orgID" id="orgID" />

								</p>
							</div>
						</div>
						<!--End #tab-details1-->



					</div>
					</form>
			</div>
			
		


		</section>




		<div class="clear"></div>

	</article>

	<!-- End content -->

	<footer>

		<div class="float-right">
			<a href="#top" class="button"><img
				src="images/icons/fugue/navigation-090.png"
				tppabs="http://www.display-inline.fr/demo/constellation/template/images/icons/fugue/navigation-090.png"
				width="16" height="16"> Page top</a>
		</div>

	</footer>

	<!--

	Updated as v1.5:
	Libs are moved here to improve performance

	-->

	<!-- Plugins -->
	<script src="js/libs/jquery.dataTables.min.js"
		tppabs="http://www.display-inline.fr/demo/constellation/template/js/libs/jquery.dataTables.min.js"></script>
	<script src="js/libs/jquery.datepick/jquery.datepick.min.js"
		tppabs="http://www.display-inline.fr/demo/constellation/template/js/libs/jquery.datepick/jquery.datepick.min.js"></script>

	<!-- Charts library -->
	<!--Load the AJAX API-->
	<script src="js/www.google.com/jsapi"
		tppabs="http://www.google.com/jsapi"></script>
	<script type="text/javascript">

		/*
		 * This script is dedicated to building and refreshing the demo chart
		 * Remove if not needed
		 */

		// Load the Visualization API and the piechart package.
		google.load('visualization', '1', {'packages':['corechart']});

		// Add listener for tab
		$('#tab-stats').onTabShow(function() { drawVisitorsChart(); }, true);

		// Handle viewport resizing
		var previousWidth = $(window).width();
		$(window).resize(function()
		{
			if (previousWidth != $(window).width())
			{
				drawVisitorsChart();
				previousWidth = $(window).width();
			}
		});

		// Demo chart
		function drawVisitorsChart() {

			// Create our data table.
			var data = new google.visualization.DataTable();
			var raw_data = [['Website', 50, 73, 104, 129, 146, 176, 139, 149, 218, 194, 96, 53],
							['Shop', 82, 77, 98, 94, 105, 81, 104, 104, 92, 83, 107, 91],
							['Forum', 50, 39, 39, 41, 47, 49, 59, 59, 52, 64, 59, 51],
							['Others', 45, 35, 35, 39, 53, 76, 56, 59, 48, 40, 48, 21]];

			var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

			data.addColumn('string', 'Month');
			for (var i = 0; i < raw_data.length; ++i)
			{
				data.addColumn('number', raw_data[i][0]);
			}

			data.addRows(months.length);

			for (var j = 0; j < months.length; ++j)
			{
				data.setValue(j, 0, months[j]);
			}
			for (var i = 0; i < raw_data.length; ++i)
			{
				for (var j = 1; j < raw_data[i].length; ++j)
				{
					data.setValue(j-1, i+1, raw_data[i][j]);
				}
			}

			// Create and draw the visualization.
			var div = $('#chart_div');
			new google.visualization.ColumnChart(div.get(0)).draw(data, {
				title: 'Monthly unique visitors count',
				width: div.width(),
				height: 330,
				legend: 'right',
				yAxis: {title: '(thousands)'}
			});

			// Message
			notify('Chart updated');
		};

	</script>

	<script type="text/javascript">

		/*
		 * This script shows how to setup the various template plugins and functions
		 */

		$(document).ready(function()
		{
			/*
			 * Example context menu
			 */

			// Context menu for all favorites
			$('.favorites li').bind('contextMenu', function(event, list)
			{
				var li = $(this);

				// Add links to the menu
				if (li.prev().length > 0)
				{
					list.push({ text: 'Move up', link:'#', icon:'up' });
				}
				if (li.next().length > 0)
				{
					list.push({ text: 'Move down', link:'#', icon:'down' });
				}
				list.push(false);	// Separator
				list.push({ text: 'Delete', link:'#', icon:'delete' });
				list.push({ text: 'Edit', link:'#', icon:'edit' });
			});

			// Extra options for the first one
			$('.favorites li:first').bind('contextMenu', function(event, list)
			{
				list.push(false);	// Separator
				list.push({ text: 'Settings', icon:'terminal', link:'#', subs:[
					{ text: 'General settings', link: '#', icon: 'blog' },
					{ text: 'System settings', link: '#', icon: 'server' },
					{ text: 'Website settings', link: '#', icon: 'network' }
				] });
			});

			/*
			 * Dynamic tab content loading
			 */

			$('#tab-comments').onTabShow(function()
			{
				$(this).loadWithEffect('ajax-tab.html'/*tpa=http://www.display-inline.fr/demo/constellation/template/ajax-tab.html*/, function()
				{
					notify('Content loaded via ajax');
				});
			}, true);

			/*
			 * Table sorting
			 */

			// A small classes setup...
			$.fn.dataTableExt.oStdClasses.sWrapper = 'no-margin last-child';
			$.fn.dataTableExt.oStdClasses.sInfo = 'message no-margin';
			$.fn.dataTableExt.oStdClasses.sLength = 'float-left';
			$.fn.dataTableExt.oStdClasses.sFilter = 'float-right';
			$.fn.dataTableExt.oStdClasses.sPaging = 'sub-hover paging_';
			$.fn.dataTableExt.oStdClasses.sPagePrevEnabled = 'control-prev';
			$.fn.dataTableExt.oStdClasses.sPagePrevDisabled = 'control-prev disabled';
			$.fn.dataTableExt.oStdClasses.sPageNextEnabled = 'control-next';
			$.fn.dataTableExt.oStdClasses.sPageNextDisabled = 'control-next disabled';
			$.fn.dataTableExt.oStdClasses.sPageFirst = 'control-first';
			$.fn.dataTableExt.oStdClasses.sPagePrevious = 'control-prev';
			$.fn.dataTableExt.oStdClasses.sPageNext = 'control-next';
			$.fn.dataTableExt.oStdClasses.sPageLast = 'control-last';

			// Apply to table
			$('.sortable').each(function(i)
			{
				// DataTable config
				var table = $(this),
					oTable = table.dataTable({
						/*
						 * We set specific options for each columns here. Some columns contain raw data to enable correct sorting, so we convert it for display
						 * @url http://www.datatables.net/usage/columns
						 */
						aoColumns: [
							{ bSortable: false },	// No sorting for this columns, as it only contains checkboxes
							{ sType: 'string' },
							{ bSortable: false },
							{ sType: 'numeric', bUseRendered: false, fnRender: function(obj) // Append unit and add icon
								{
									return '<small><img src="images/icons/fugue/image.png"/*tpa=http://www.display-inline.fr/demo/constellation/template/images/icons/fugue/image.png*/ width="16" height="16" class="picto"> '+obj.aData[obj.iDataColumn]+' Ko</small>';
								}
							},
							{ sType: 'date' },
							{ sType: 'numeric', bUseRendered: false, fnRender: function(obj) // Size is given as float for sorting, convert to format 000 x 000
								{
									return obj.aData[obj.iDataColumn].split('.').join(' x ');
								}
							},
							{ bSortable: false }	// No sorting for actions column
						],

						/*
						 * Set DOM structure for table controls
						 * @url http://www.datatables.net/examples/basic_init/dom.html
						 */
						sDom: '<"block-controls"<"controls-buttons"p>>rti<"block-footer clearfix"lf>',

						/*
						 * Callback to apply template setup
						 */
						fnDrawCallback: function()
						{
							this.parent().applyTemplateSetup();
						},
						fnInitComplete: function()
						{
							this.parent().applyTemplateSetup();
						}
					});

				// Sorting arrows behaviour
				table.find('thead .sort-up').click(function(event)
				{
					// Stop link behaviour
					event.preventDefault();

					// Find column index
					var column = $(this).closest('th'),
						columnIndex = column.parent().children().index(column.get(0));

					// Send command
					oTable.fnSort([[columnIndex, 'asc']]);

					// Prevent bubbling
					return false;
				});
				table.find('thead .sort-down').click(function(event)
				{
					// Stop link behaviour
					event.preventDefault();

					// Find column index
					var column = $(this).closest('th'),
						columnIndex = column.parent().children().index(column.get(0));

					// Send command
					oTable.fnSort([[columnIndex, 'desc']]);

					// Prevent bubbling
					return false;
				});
			});

			/*
			 * Datepicker
			 * Thanks to sbkyle! http://themeforest.net/user/sbkyle
			 */
			$('.datepicker').datepick({
				alignment: 'bottom',
				showOtherMonths: true,
				selectOtherMonths: true,
				renderer: {
					picker: '<div class="datepick block-border clearfix form"><div class="mini-calendar clearfix">' +
							'{months}</div></div>',
					monthRow: '{months}',
					month: '<div class="calendar-controls" style="white-space: nowrap">' +
								'{monthHeader:M yyyy}' +
							'</div>' +
							'<table cellspacing="0">' +
								'<thead>{weekHeader}</thead>' +
								'<tbody>{weeks}</tbody></table>',
					weekHeader: '<tr>{days}</tr>',
					dayHeader: '<th>{day}</th>',
					week: '<tr>{days}</tr>',
					day: '<td>{day}</td>',
					monthSelector: '.month',
					daySelector: 'td',
					rtlClass: 'rtl',
					multiClass: 'multi',
					defaultClass: 'default',
					selectedClass: 'selected',
					highlightedClass: 'highlight',
					todayClass: 'today',
					otherMonthClass: 'other-month',
					weekendClass: 'week-end',
					commandClass: 'calendar',
					commandLinkClass: 'button',
					disabledClass: 'unavailable'
				}
			});
		});

		// Demo modal
		function openModal()
		{
			$.modal({
				content: '<p>This is an example of modal window. You can open several at the same time (click button below!), move them and resize them.</p>'+
						  '<p>The plugin provides several other functions to control them, try below:</p>'+
						  '<ul class="simple-list with-icon">'+
						  '    <li><a href="javascript:void(0)" onclick="$(this).getModalWindow().setModalTitle(\'\')">Remove title</a></li>'+
						  '    <li><a href="javascript:void(0)" onclick="$(this).getModalWindow().setModalTitle(\'New title\')">Change title</a></li>'+
						  '    <li><a href="javascript:void(0)" onclick="$(this).getModalWindow().loadModalContent(\'ajax-modal.html\')">Load Ajax content</a></li>'+
						  '</ul>',
				title: 'Example modal window',
				maxWidth: 500,
				buttons: {
					'Open new modal': function(win) { openModal(); },
					'Close': function(win) { win.closeModal(); }
				}
			});
		}
		
		function validateDepartment() {
			var checkAdd;
			var errorMessage = "";
			var dpName = document.forms["table_form"]["departmentName"].value;
			var dpDes = document.forms["table_form"]["shortDescription"].value;
			if (dpName == "" || dpName == null) {
				errorMessage += "Department name can't be empty !<br/>";
				checkAdd = false;
			}
			if (dpDes == "" || dpDes == null) {
				errorMessage += "Department description can't be empty !<br/>";
				checkAdd = false;
			}
			if (checkAdd == false) {
				document.getElementById('message').innerHTML = errorMessage;
				var myError = document.getElementById("message");
				myError.style.color = "red";
			}

			else {
				document.forms["table_form"].submit();
			}

		}
	</script>

</body>
</html>
